<template>
  <div class="orderListWrapper">
    <!--<div class="orderListTop">
      <tab :line-width=2 active-color='#f19600' :index.sync="index">
        <tab-item @on-item-click="handler" class="vux-center" :selected="curPage === item" v-for="item in list"
                  @click="curPage = item">{{item}}
        </tab-item>
      </tab>
    </div>-->
    
    <div class="orderListMiddle" v-show="pageShow">
      <!--<div class="mallOrderList pt-page {{secondStatus}} {{secondAnimate}}">商城订单</div>-->

      <scroller height="100%" v-ref:scroller :pulldown-config="pulldownConfig" :pullup-config="pullupConfig" @pullup:loading="loadMore"
                @pulldown:loading="refresh" lock-x use-pullup use-pulldown :pullup-status="pullupStatus">
        <div class="orderList pt-page {{firstStatus}} {{firstAnimate}}">
          <div class="item" v-for="item in zfOrderList">
            <div class="top">
              <div class="order-time">
                <span class="time-title">下单时间:</span>
                <span class="time-detail">{{item.orderTime}}</span>
              </div>
              <div class="evaluate" v-if="item.payState === 0">待付款</div>
              <div class="evaluate" v-if="item.payState === 2 && item.state == 1">未评价</div>
              <div class="evaluate" v-if="item.payState === 2 && item.state == 2">交易成功</div>
              <div class="evaluate" v-if="item.payState === 3 ">退款中</div>
              <div class="evaluate" v-if="item.payState === 4">已退款</div>
            </div>
            <div v-for="goods in item.newShopList" @click="showDetail(item)">
              <div class="middle" v-for="good in goods">
                <div class="left-img"><img v-bind:src="good.productImage" alt=""></div>
                <div class="right-des-box">
                  <div class="des-top">
                    <span class="order-name">{{good.productName}}</span>
                    <span class="des-end">等1类商品</span>
                  </div>
                  <div class="time">
                    <span class="time-name">送餐日期:</span>
                    <span class="time-date">{{good.sendDate}}</span>
                    <span class="time-week">[{{good.week}}]</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="bottom">
              <div class="left">
                <span class="product-title-l">共</span>
                <span class="product-num">{{item.quantity}}</span>
                <span class="product-title-r">件商品</span>
                <span class="total-price-title">总价:</span>
                <span class="total-price-detail">￥{{item.totalPrice}}元</span>
              </div>
              <div class="right-evaluate">
                <div @click="toPay(item)" class="evaluate-btn" v-if="item.state === 0">去付款</div>
                <div class="evaluate-btn" @click="toComment(item)" v-if="item.state === 1">去评价</div>
                <div class="evaluate-btn" v-if="item.state === 2" @click="toPlaceOrder()">再来一单</div>
                <div class="evaluate-btn" v-if="item.state === 3" @click="toPlaceOrder()">再来一单</div>
              </div>
            </div>
          </div>
        </div>
      </scroller>
    </div>
    
  </div>
</template>
<script>
  import {orderInfo} from './../../vuex/getters.js'
  import {set_orderInfo} from './../../vuex/actions.js'
  import {Tab, TabItem, Sticky, Divider, XButton, Scroller} from '../../components'
  const list = () => ['早餐订单', '商城订单']

  var LocalStorageUtil = require('./../../commons/js/LocalStorageUtil.js')
  var MyRequest = require('./../../commons/js/MyRequest.js')
  var Global = require("./../../commons/js/Global.js")
  export default {
    components: {
      Tab,
      TabItem,
      Sticky,
      Divider,
      XButton,
      Scroller
    },
    data () {
      return {
        userInfo: LocalStorageUtil.getItem("User"),
        pageCount: 6,
        pageNo: 1,
        list: list(),
        index: 0,
        preIndex: 0,
        curPage: '早餐订单',
        firstStatus: 'pt-page-current',
        secondStatus: '',
        firstAnimate: '',
        secondAnimate: '',
        zfOrderList: '',
        mallOrderList: '',
        is_last: false,
        pullupStatus: 'enabled',
        pageShow: false,
        destoryStatus: true ,
        pulldownConfig: {
          content: '下拉刷新',
          autoRefresh: false,
          height: 30,
          downContent: '下拉刷新',
          upContent: '释放刷新',
          loadingContent: '加载中',
          clsPrefix: 'xs-plugin-pullup-'
        },
        pullupConfig: {
          content: '请上拉刷新数据',
          autoRefresh: false,
          height: 30,
          downContent: '请上拉刷新数据',
          upContent: '请上拉刷新数据',
          loadingContent: '加载中...',
          clsPrefix: 'xs-plugin-pullup-'
        }
      }
    },
    vuex: {
      getters: {
        orderInfo
      },
      actions: {
        set_orderInfo
      }
    },
    methods: {
      showDetail (item) {
        this.set_orderInfo(item)
        this.$router.go({path: '/orderInfo'})
      },
      toComment (item) {
        this.set_orderInfo(item)
        this.$router.go({path: '/comment'})
      },
      toPlaceOrder () {
        this.$router.go({path: '/'})
      },
      handler () {
        if (this.index != this.preIndex) {
          if (this.index == 0) {
            this.firstStatus = 'pt-page-current'
            this.secondStatus = 'pt-page-current'
            this.firstAnimate = 'pt-page-moveFromLeft'
            this.secondAnimate = 'pt-page-moveToRight'
          } else {
            this.firstStatus = 'pt-page-current'
            this.secondStatus = 'pt-page-current'
            this.firstAnimate = 'pt-page-moveToLeft'
            this.secondAnimate = 'pt-page-moveFromRight'
          }
          this.preIndex = this.index
        }
      },
      loadMore (uuid) {
        var _this = this
        console.log(_this.pullupStatus)
        if(!_this.is_last) { //判断当前是否是最后一页
           var data = {
            action: 'list',
            userId: _this.userInfo.id,
            begin: 0,
            end: _this.pageCount * _this.pageNo
          }
          _this.uuid = uuid
          MyRequest.MyGetWithToast("OrderList", _this, function (result, that) {
            if(result.success && that.destoryStatus) {
              if(result.data.length != (that.pageCount * that.pageNo)) {
                that.is_last = true
                // that.pullupStatus = 'disabled'
                //  that.$refs.scroller.disablePullup
                that.$broadcast('pullup:disable', that.uuid)
              }
              that.pageNo++
              that.zfOrderList = that.solveShopData(result.data)
              that.$nextTick(() => {
                that.$broadcast('pullup:reset', that.uuid)
                that.$refs.scroller.reset()
              })
            }
            Global.closeLoading()
          }, data)
        } else {
            that.$broadcast('pullup:disable', that.uuid)
        }
      },
      refresh (uuid) {
        this.pageNo = 1
        var data = {
          action: 'list',
          userId: this.userInfo.id,
          begin: 0,
          end: this.pageCount * this.pageNo
        }
        this.uuid = uuid
        MyRequest.MyGetWithToast("OrderList", this, function (result, that) {
          that.is_last = false
          that.$broadcast('pullup:enable', that.uuid)
          if(result.data.length != (that.pageCount * that.pageNo)) {
            that.is_last = true
            that.$broadcast('pullup:disable', that.uuid)
          }
          that.pageNo++
          that.zfOrderList = that.solveShopData(result.data)
          that.$nextTick(() => {
            that.$broadcast('pulldown:reset', that.uuid)
            that.$refs.scroller.reset()
          })
          Global.closeLoading()
        }, data)
      },
      solveShopData (data) {
        var weekday = new Array(7);
        weekday[0] = "周日";
        weekday[1] = "周一";
        weekday[2] = "周二";
        weekday[3] = "周三";
        weekday[4] = "周四";
        weekday[5] = "周五";
        weekday[6] = "周六";
        for (var i = 0; i < data.length; i++) {
          var newShopList = new Array();
          for (var item in data[i].shopData) {
            var curOrderList = data[i].shopData[item]
            for (var k = 0; k < curOrderList.length; k++) {
              var week = (new Date(curOrderList[k].sendDate)).getDay()
              curOrderList[k].week = weekday[week]
            }
            newShopList.push(curOrderList)
          }
          data[i].newShopList = newShopList
          data[i].totalPrice = Global.toDecimal2(data[i].totalPrice)
        }
        return data
      },
      toPay(item){
        console.log("支付");
        console.log("accountMoney" + item.accountMoney);
        console.log("freePrice" + item.freePrice);
        console.log("goodsCount" + item.goodsCount);
        console.log("orderId" + item.orderId);
        console.log("orderNo" + item.orderNo);
        console.log("orderTime" + item.orderTime);
        console.log("totalPrice" + item.totalPrice);
        this.$router.go({
          name: 'pay', query: {
            freePrice: item.freePrice,
            orderId: item.orderId,
            orderNo: item.orderNo,
            orderTime: item.orderTime,
            totalPrice: item.totalPrice
          }
        });
      }
    },
    ready: function () {
      var data = {
        action: 'list',
        userId: this.userInfo.id,
        begin: 0,
        end: this.pageCount * this.pageNo
      }
      MyRequest.MyGetWithToast("OrderList", this, function (result, that) {
        console.log(result)
        if(result.data.length != (that.pageCount * that.pageNo)) {
          that.is_last = true
          that.$broadcast('pullup:disable', that.uuid)
        }
        that.pageNo++;
        that.zfOrderList = that.solveShopData(result.data)
        that.pageShow = true
        that.$refs.scroller.reset()
        Global.closeLoading()
      }, data)
    },
    beforeDestroy() {
      this.destoryStatus = false
      console.log(this.destoryStatus)
    },
    activate: function (done) {
      console.log(0)
    }
  }

</script>
<style lang="less">
  @import './orderList.less';

</style>
